import { StyleSheet, Text, View, TouchableWithoutFeedback } from 'react-native'
import React, { useRef, useState, useCallback } from 'react'
import UserCell from '../../components/UserCell'
import axios from '../../axios'
import FlatList from '../../components/FlatList'
import { useFocusEffect } from '@react-navigation/native'
import { Button, Image } from 'native-base'
import { getDomain } from '../../utils/tools'
import Dialog from '../../components/Dialog'

const Cart = ({ navigation }) => {
  const [status, setStatus] = useState('loading')
  const [query, setQuery] = useState({
    index: 1,
    size: 20
  })
  const [list, setList] = useState([])
  let [editId, setEditId] = useState('')
  const dialogRef = useRef(null)

  useFocusEffect(
    useCallback(() => {
      // Do something when the screen is focused
      console.log('路由进来了')
      axios.get('/cart', query).then(res => {
        setList([...list, ...res.data.records])
        // setList(res.data.records)
        if (res.data.records.length < query.size) setStatus('noMore')
        else setStatus('more')
      }).catch(err => { })
      return () => {
        // Do something when the screen is unfocused
        // Useful for cleanup functions
        console.log('路由离开了')
      };
    }, [query])
  )
  const onEndReached = () => {
    console.log('到底了')
    if (status === 'noMore') return 
    setStatus('loading')
    setQuery({
      ...query,
      index: query.index + 1
    })
  }
  const to = (name, query) => {
    navigation.navigate(name, query)
  }
  const open = (id) => {
    setEditId(id)
    console.log(dialogRef)
    dialogRef.current.open()
  }
  const del = () => {
    console.log(editId)
    axios.delete('/cart', {
      id: editId
    }).then(() => {
      setList(list.filter((item => {
        return item._id !== editId
      })))
      console.log(dialogRef.current)
      dialogRef.current.close()
    }).catch(err=>{
      // console.log(err)
    })
  }
  const renderItem = ({ data }) => {
    return (
      <View style={styles.card}>
        <UserCell data={data.business} link='BusinessCenter' borderBottom={true}></UserCell>
        <TouchableWithoutFeedback onPress={() => to('GoodsDetail', {
          id: data.goods._id
        })}>
          <View style={styles.goods}>
            <Image style={styles.cover} source={{ uri: getDomain(data.goods.pictures[0].url) }} alt="图片丢失"></Image>
            <View style={styles.info}>
              <Text>{data.goods.title}</Text>
              <Text style={styles.price}>{data.goods.price}</Text>
            </View>
          </View>
        </TouchableWithoutFeedback>
        <Button colorScheme="secondary" onPress={()=>open(data._id)}>删除</Button>
      </View>
    )
  }
  return (
    <View>
      <FlatList data={list} renderItem={renderItem} status={status}
        onEndReached={onEndReached}
      />
      <Dialog ref={dialogRef} confirm={del} />
    </View>
  )
}

export default Cart

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#fff',
    // marginHorizontal: 5,
    marginVertical: 5
  },
  goods: {
    display: 'flex',
    flexDirection: 'row',
    paddingHorizontal: 5,
    paddingVertical: 10
  },
  info: {
    display: 'flex',
    justifyContent: 'space-between',
    paddingVertical: 5,
    paddingHorizontal: 10
  },
  cover: {
    width: 100,
    height: 100,
    borderRadius: 10
  },
  price: {
    color: 'orange'
  }
})